<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--学籍数据-->
      <el-col :xs="15" :sm="18" :md="19" :lg="20" :xl="20">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input
              v-model="query.blurry"
              clearable
              size="small"
              placeholder="输入昵称进行搜索"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
            <rrOperation/>
          </div>
          <crudOperation show="" :permission="permission"/>

        </div>
        <!--表单渲染-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
                   :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="700px">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="姓名" prop="userName">
                    <el-select v-model="form.userName" placeholder="请选择">
                      <el-option
                        v-for="item in userList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="grid-content bg-purple">
                  <el-form-item label="状态" prop="statusState">
                    <el-radio-group v-model="statusState">
                      <el-radio v-model="form.state" :label="0">正常</el-radio>
                      <el-radio v-model="form.state" :label="1">注销</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="学历" prop="education">
                    <el-select v-model="form.education" placeholder="请选择">
                      <el-option
                        v-for="item in educationList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="grid-content bg-purple">
                  <el-form-item label="学制" prop="educationalSystem">
                    <el-select v-model="form.educationalSystem" placeholder="请选择">
                      <el-option
                        v-for="item in educationalSystemList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="学校" prop="cascadeData">
                    <el-cascader v-model="form.cascadeData" :options="cascadeList" clearable></el-cascader>
                  </el-form-item>
                </div>
                <div class="grid-content bg-purple">
                  <el-form-item label="学历照片" prop="paperImage">
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadEducationalImage"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="uploadSuccess"
                      :before-upload="beforeUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="学习形式" prop="learningForm">
                    <el-select v-model="form.learningForm" placeholder="请选择">
                      <el-option
                        v-for="item in learningFormList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="grid-content bg-purple">
                  <el-form-item label="入学时间" prop="admissionTime">
                    <el-date-picker
                      align="center"
                      v-model="form.admissionTime"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                  @selection-change="crud.selectionChangeHandler">
          <el-table-column :selectable="checkboxT" type="selection" width="55"/>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="userName" label="姓名"/>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="jobNumber" label="学号"/>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="tenantName" label="学校名称"/>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="education" label="学历">
          </el-table-column>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state===0">正常</span>
              <span v-if="scope.row.state===1">冻结</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :show-overflow-tooltip="true" prop="createTime" label="创建日期">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-permission="['admin','user:edit','user:del']"
            label="操作"
            width="350"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <udOperation
                style="display: inline-block"
                :data="scope.row"
                :permission="permission"
              />
              <el-button
                style="display: inline-block;"
                :permission="permission"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="showDetails(scope.row)">
                查看详情
              </el-button>
              <el-button
                style="display: inline-block;"
                v-loading="loading"
                :permission="permission"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="exportPdf(scope.row)">
                导出pdf
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination/>
      </el-col>
    </el-row>

    <!--// 查看详情 start-->
    <el-dialog
      title="提示"
      :visible.sync="statusDetails"
      :show-close="false"
      :show-footer="false"
      width="80%">
      <el-form ref="form" :model="detailsForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="姓名" prop="userName">
                <el-select  :disabled="true" v-model="detailsForm.userName" placeholder="请选择">
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="grid-content bg-purple">
              <el-form-item label="状态" prop="statusState">
                <el-radio-group  :disabled="true" v-model="statusState">
                  <el-radio v-model="detailsForm.state" :label="0">正常</el-radio>
                  <el-radio v-model="detailsForm.state" :label="1">注销</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="学历" prop="education">
                <el-select   :disabled="true"v-model="detailsForm.education" placeholder="请选择">
                  <el-option
                    v-for="item in educationList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="grid-content bg-purple">
              <el-form-item label="学制" prop="educationalSystem">
                <el-select  :disabled="true" v-model="detailsForm.educationalSystem" placeholder="请选择">
                  <el-option
                    v-for="item in educationalSystemList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
<!--            <div class="grid-content bg-purple">-->
<!--              <el-form-item label="学校" prop="cascadeData">-->
<!--                <el-cascader  :disabled="false" v-model="detailsForm.cascadeData" :options="cascadeList" clearable></el-cascader>-->
<!--              </el-form-item>-->
<!--            </div>-->
            <div class="grid-content bg-purple">
              <el-form-item label="学历照片" prop="paperImage">
                <el-upload
                  :disabled="true"
                  class="avatar-uploader"
                  :action="uploadEducationalImage"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="uploadSuccess"
                  :before-upload="beforeUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="学习形式" prop="learningForm">
                <el-select  :disabled="true" v-model="detailsForm.learningForm" placeholder="请选择">
                  <el-option
                    v-for="item in learningFormList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="grid-content bg-purple">
              <el-form-item label="入学时间" prop="admissionTime">
                <el-date-picker
                  align="center"
                  :disabled="true"
                  v-model="detailsForm.admissionTime"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--// 查看详情 end-->
  </div>
</template>

<script>
import myUpload from 'vue-image-crop-upload'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker/index'
import Treeselect from '@riophae/vue-treeselect'
import {mapGetters} from 'vuex'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import appUtils from '@/utils/appUtils'
import {getToken} from '@/utils/auth'
import status from '@/api/studentStatus/status'
import {tenantList} from '@/api/system/tenant'
import {getDepartments, getById} from '@/api/studentStatus/status'
import dataUtils from '@/utils/dataUtils'
import {getStudents} from '@/api/system/user'

const defaultForm = {
  id: null,
  education: null,
  paperImage: null,
  admissionTime: null,
  tenantId: null,
  studentNumber: '',
  departmentId: null,
  majorId: null,
  state: 0,
  userName: null,
  learningForm: null,
  educationalSystem: null,
  cascadeData: null
}
export default {
  name: 'School',
  components: {myUpload, Treeselect, crudOperation, rrOperation, udOperation, pagination, DateRangePicker},
  cruds() {
    return CRUD({title: '学籍', url: 'admin/SysStudentStatus/page', crudMethod: {...status}})
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  // 数据字典
  data() {
    return {
      statusDetails:false,
      // 可选用户
      loading: false,
      userList: [],
      cascadeList: [],
      // 学籍状态，默认正常
      statusState: 0,
      // 学籍照片回显地址
      imageUrl: null,
      // 照片上传地址
      uploadApi: 'aaaaaaaa',
      headers: {
        'Authorization': getToken()
      },
      showUpload: false,
      height: document.documentElement.clientHeight - 180 + 'px;',
      deptName: '', level: 3,
      permission: {
        add: ['sys_studentStatus_view'],
        edit: ['sys_studentStatus_view'],
        del: ['sys_studentStatus_view']
      },
      rules: {
        studentNumber: [
          {required: true, message: '请输入学号', trigger: 'change'}
        ],
        educationalSystem: [
          {required: true, message: '请选择学制', trigger: 'change'}
        ],
        learningForm: [
          {required: true, message: '请选择学习形式', trigger: 'change'}
        ],
        admissionTime: [
          {required: true, message: '请选择日期', trigger: 'change'}
        ],
        cascadeData: [
          {required: true, message: '请选择学校', trigger: 'change'}
        ],
        userName: [
          {required: true, message: '请选择学生', trigger: 'change'}
        ],
        education: [
          {required: true, message: '请选择学历', trigger: 'change'}
        ]
      },
      // 学校集合
      tenantList: [],
      // 院系集合
      departmentList: [],
      // 专业集合
      majorList: [],
      // 学历集合
      educationList: [
        {
          label: '专科',
          value: 0
        },
        {
          label: '本科',
          value: 1
        },
        {
          label: '硕士',
          value: 2
        },
        {
          label: '博士',
          value: 3
        }
      ],
      // 学制集合
      educationalSystemList: [
        {
          label: '二年制',
          value: 2
        },
        {
          label: '三年制',
          value: 3
        },
        {
          label: '四年制',
          value: 4
        },
        {
          label: '五年制',
          value: 5
        }
      ],
      // 学习形式
      learningFormList: [
        {
          label: '全日制',
          value: 0
        },
        {
          label: '非全日制',
          value: 1
        }
      ],
      // 详情表单
      detailsForm:{
        userName:null,
        state:null,
        education:null,
        educationalSystem:null,
        cascadeData:null,
        learningForm:null,
        admissionTime:null
      }
    }
  },
  computed: {
    ...mapGetters([
      'uploadEducationalImage'
    ])
  },
  created() {
    this.getAllTenants()
    this.getCascadeList()
    this.getAllStudents()

  },
  mounted: function () {
    const that = this
    window.onresize = function temp() {
      that.height = document.documentElement.clientHeight - 180 + 'px;'
    }
  },
  methods: {
    toggleShow() {
      this.showImage = !this.showImage
    },
    // 学籍照片上传成功
    uploadSuccess(res, file) {
      if (res.state) {
        this.imageUrl = res.data.url
      } else {
        appUtils.showError('上传失败')
      }
    },
    beforeUpload() {

    },
    // 获取全部学校
    getAllTenants() {
      tenantList().then(res => {
        if (res.state) {
          this.tenantList = res.data
        }
      })
    },
    // 添加之前
    [CRUD.HOOK.afterValidateCU](crud) {
      if (crud.form.cascadeData.length > 0) {
        crud.form.department = crud.form.cascadeData[1]
        crud.form.major = crud.form.cascadeData[2]
        crud.form.tenantId = crud.form.cascadeData[0]
      }
      if (this.imageUrl != null) {
        crud.form.paperImage = this.imageUrl
      }
    },

    // 打开编辑之前
    [CRUD.HOOK.beforeToEdit](crud) {
      getById(crud.form.id).then(res => {
        if (res.state) {
          let cascade = []
          cascade.push(crud.form.tenantId)
          cascade.push(Number(res.data.department))
          cascade.push(Number(res.data.major))
          crud.form.cascadeData = cascade
          this.imageUrl = res.data.paperImage
        }
      })
      // this.changeType(crud.form)
      return true
    },

    // 导出个人数据pdf
    exportPdf(row) {
      this.loading = true
      // 发送请求
      let exportUrl = '/admin/SysStudentStatus/export-pdf'
      fetch(exportUrl, {
        method: 'post',
        body: JSON.stringify(row),
        headers: new Headers({
          'Content-Type': 'application/json',
          'Authorization': getToken()
        }),
      }).then(res => res.blob().then(blob => {
        if (res.status) {
          // 导出成功
          let a = document.createElement('a')
          let url = window.URL.createObjectURL(blob)
          let fileName = '个人学籍表.pdf'
          a.href = url
          a.download = fileName
          a.click()
          window.URL.revokeObjectURL(url)
          this.loading = false
        }
      }))
    },
    checkboxT(row, rowIndex) {

    },

    // 选中学校，获取院校
    getCascadeList() {
      getDepartments().then(res => {
        if (res.state) {
          let that = this
          res.data.forEach(function (val) {
            let majorList = []
            let departmentList = []
            let major = {
              value: val.majorId,
              label: val.majorName
            }
            majorList.push(major)
            let department = {
              value: val.departmentId,
              label: val.departmentName,
              children: majorList
            }
            departmentList.push(department)
            let tenant = {
              value: val.tenantId,
              label: val.tenantName,
              children: departmentList
            }
            that.cascadeList.push(tenant)
          })
        } else {
          appUtils.showError(res.msg)
        }
      })
    },

    // 获取全部学生
    getAllStudents() {
      getStudents(4).then(res => {
        if (res.state) {
          this.userList = res.data
        }
      })
    },
    // 查看学籍详情
    showDetails(row) {
      this.statusDetails=true
      let model=JSON.stringify(row)
      this.detailsForm=row
      console.log(row);
      this.detailsForm.cascadeData=Number(row.department)
      this.imageUrl=row.paperImage
    },



    // 格式转换
    changeType(data) {
      if (Number(data.learningForm) === 0) {
        data.learningForm = '全日制'
      }
      if (Number(data.learningForm) === 1) {
        data.learningForm = '非全日制'
      }
      if (Number(data.educationalSystem) === 2) {
        data.educationalSystem = '二年制'
      }
      if (Number(data.educationalSystem) === 3) {
        data.educationalSystem = '三年制'
      }
      if (Number(data.educationalSystem) === 4) {
        data.educationalSystem = '四年制'
      }
      if (Number(data.educationalSystem) === 5) {
        data.educationalSystem = '五年制'
      }
      if (Number(data.education) === 0) {
        data.education = '专科'
      }
      if (Number(data.education) === 1) {
        data.education = '本科'
      }
      if (Number(data.education) === 2) {
        data.education = '硕士'
      }
      if (Number(data.education) === 3) {
        data.education = '博士'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control, ::v-deep .vue-treeselect__placeholder, ::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
